<script setup>
import {ref} from 'vue'
import more from '@/assets/more.png'
import {onLoad,onShow} from '@dcloudio/uni-app';
import {get ,updateDameRed} from '@/api/app.js'
import {jumpPageInput} from '@/utils/uniUtil.js'
import { useTextInputStore } from '@/stores/textInput.js'
import {VerifyService} from '@/utils/verifyUtil.js'
import {createDameRed} from "../../../api/app";
const textInputStore = useTextInputStore()

const domainForm = ref({
  id: undefined,
  domain: '',
  protocols: '',
  sld: '',
  target: '',
  state: 0,
  platform: '',
})

const currentId = ref()
const picker = ref()
const toast = ref()
const modelTitle = ref('')

const columns = [
  ['http', 'https']
]

onLoad((param) => {
  if (!param.id || param.id === "undefined"){
    return
  }
  currentId.value = param.id
  get(param.id).then(res => {
    domainForm.value = res.data
    console.log(domainForm.value)
  })
})

onShow(()=>{
  if (textInputStore.extraData.size > 0) {
    console.log(textInputStore.extraData)
    const map = textInputStore.extraData
    const callbackKey = textInputStore.callbackKey
    domainForm.value[callbackKey] = map.get(callbackKey)
  }
})

/**
 * 跳转页面
 * @param title 页面标题
 * @param key 存储内容的key
 * @param val 寸尺内容的value
 */
const toEditPage = (title,key,val) => {
  modelTitle.value = title
  jumpPageInput("/pages/comm/text/text",{title:title,key:key,val:val})
}

const choose = () => {
  picker.value.open()
}

const confirm = (value) => {
  domainForm.value.protocols = value.value[0]
}

const submit = () => {
  const {domain,platform,target,sld} = domainForm.value
  if (!VerifyService.verifyUrl( domain)){
    toast.value.show({
      message: '域名格式错误',
      type: 'error',
      duration: 2000
    })
  }
  if (!VerifyService.verifyName(platform)){
    // 需要校验平台名称是否合法
    toast.value.show({
      message: '平台名称不合法',
      type: 'error',
      duration: 2000
    })
  }
  if (!VerifyService.verifyUrl(target)){
    // 需要校验跳转地址是否合法
    toast.value.show({
      message: '跳转地址不合法',
      type: 'error',
      duration: 2000
    })
  }
  if (!VerifyService.verifySld(sld)){
    // 需要校验二级域名是否合法
    toast.value.show({
      message: '二级域名不合法',
      type: 'error',
      duration: 2000
    })
  }

  // 更新操作
  if (currentId.value) {
    updateDameRed(currentId.value,domainForm.value).then(res => {
      toast.value.show({
        message: res.msg,
        type: 'success',
        duration: 2000,
      })
    })
    return
  }
  createDameRed(domainForm.value).then(res => {
    toast.value.show({
      message: res.msg,
      type: 'success',
      duration: 2000,
    })
  })

}

</script>

<template>
  <uv-navbar title="编辑连接" :autoBack="true"></uv-navbar>
  <view class="container">
    <view class="edit-box">
      <view class="item">
        <view class="label">请求地址</view>
        <view class="value-box" @click="toEditPage('修改昵称','domain',domainForm.domain)">
          <text class="text">{{ domainForm.domain }}</text>
          <image :src="more" mode="aspectFill" class="item-icon"></image>
        </view>
      </view>
      <view class="item">
        <view class="label" >选择协议</view>
        <view class="value-box" @click="choose">
          <text class="text">{{ domainForm.protocols }}</text>
          <image :src="more" mode="aspectFill" class="item-icon"></image>
        </view>
      </view>
      <view class="item">
        <view class="label">二级域名</view>
        <view class="value-box" @click="toEditPage('二级域名','sld',domainForm.sld)">
          <text class="text">{{ domainForm.sld }}</text>
          <image :src="more" mode="aspectFill" class="item-icon"></image>
        </view>
      </view>
      <view class="item">
        <view class="label">跳转地址</view>
        <view class="value-box" @click="toEditPage('跳转地址','target',domainForm.target)">
          <text class="text">{{ domainForm.target }}</text>
          <image :src="more" mode="aspectFill" class="item-icon"></image>
        </view>
      </view>
      <view class="item">
        <view class="label">域名状态</view>
        <view class="value-box">
          <uv-switch v-model="domainForm.state" :inactiveValue="0" :activeValue="1" size="20"></uv-switch>
        </view>
      </view>
      <view class="item">
        <view class="label">平台名称</view>
        <view class="value-box" @click="toEditPage('平台名称','platform',domainForm.platform)">
          <text class="text">{{ domainForm.platform }}</text>
          <image :src="more" mode="aspectFill" class="item-icon"></image>
        </view>
      </view>
    </view>
  </view>
  <view class="bottom-btn">
    <uv-button type="primary" @click="submit" shape="circle" class="btn" size="large" text="确认修改"></uv-button>
  </view>
  <uv-toast ref="toast"></uv-toast>
  <uv-picker ref="picker" :columns="columns" title="选择协议" @confirm="confirm"></uv-picker>
</template>

<style lang="scss">
page {
  background-color: #f3f7fa !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}
</style>
<style scoped lang="scss">
@import "@/styles/minxi.scss";

.container {
  .edit-box {
    margin: 0 35.67rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 60rpx 0;

      .label {
        font-size: 30rpx;
        color: #555;
      }

      .value-box {
        display: flex;
        align-items: center;
        @include text-style(28rpx, #666,400);
        .item-icon {
          margin-left: 10rpx;
          width: 10.26rpx;
          height: 20.51rpx;
        }
        .text{
          max-width: 400rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 160px;
  background-color: #fff;
  @include flex-center;

  .btn {
    width: 90%;
  }
}
</style>